<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="instanceId" label="实例ID"> </el-table-column>
    <el-table-column prop="name" label="实例名称"> </el-table-column>
    <el-table-column prop="startDate" label="实例创建时间"> </el-table-column>
    <el-table-column prop="deploymentId" label="流程部署ID"> </el-table-column>
    <el-table-column prop="resourceName" label="资源名称"> </el-table-column>
    <el-table-column prop="processDefinitionId" label="流程定义编号">
    </el-table-column>
    <el-table-column prop="processDefinitionKey" label="流程定义KEY">
    </el-table-column>
    <el-table-column prop="status" label="状态"> </el-table-column>
    <el-table-column prop="processDefinitionVersion" label="流程部署版本">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handle(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getInstances();
  },
  methods: {
    handle(row) {
      debugger;
      let route = this.$router.resolve({
        path: "/webSocket",
        query: {
          deploymentId: row.deploymentId,
          resourceName: row.resourceName,
          instanceId: row.instanceId
        },
      });
      window.open(route.href, '_blank');
    },
    getInstances() {
      this.$store.dispatch("getInstances").then((res) => {
        this.tableData = res.obj;
      });
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>